<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import {
  createMenu,
  getMenuTree,
  SysMenu,
  updateMenu
} from "../../api/sysMenu";

import { ref } from "vue";
import { useSysMenuProvider } from "./provider";

const query = ref<Record<string, any>>({});
const { columns, deleteRow } = useSysMenuProvider();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: any[]; total: number }> => {
  const { data } = await getMenuTree(pgs);
  return {
    list: data,
    total: data.length
  };
};
</script>

<template>
  <div>
    <CrudPage
      title="系统菜单"
      row-key="menuId"
      :create="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :edit="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :columns="columns"
      child-field="children"
      :get-data-list="onShouldLoadData"
      @edit-confirm="updateMenu"
      @create-confirm="createMenu"
    >
      <template #toolbar-action="{ search }">
        <el-space>
          <el-input v-model="query.title" placeholder="菜单名称">
            <template #suffix>
              <el-button icon="Search" text @click="search(query)" />
            </template>
          </el-input>
        </el-space>
      </template>

      <template #title="{ row }">
        <el-space>
          <el-icon><component :is="useRenderIcon(row.icon)" /></el-icon>
          <span>{{ row.title }}</span>
        </el-space>
      </template>

      <!-- operation -->
      <template #operation="{ row, edit }">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-popconfirm
          :title="`是否确认删除'${row.title}'?`"
          width="200"
          @confirm="deleteRow(row)"
        >
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </CrudPage>
  </div>
</template>
<style lang="scss" scoped></style>
